<template>
	<view class="">
		<sclIntroPageTypeDongWuLianAi v-if="detailData" :sclInfo="detailData" @startScl="startScl"
			@backHandle="$emit('backHandle')"/>
		<view :style="{backgroundImage:'url('+staticImgs.bg+')'}" v-show="isStartScl" :class="['quesiton-page',isStartScl?'fade-in-element':'fade-out-element']">
			<navigationBar :emitBackEvent="true" @backEvent="$emit('backHandle')" :my-property="navigationBarDataInfo"
				 />
			<!-- :style="{backgroundImage:'url('+staticImgs.topBg+')'}" -->
			<view class="top-box" :style="{backgroundImage:'url('+staticImgs.topBg+')'}">
				<image :src="staticImgs.lightShanshuo" class="lightShanshuo-1" mode=""></image>
				<image :src="staticImgs.lightShanshuo" class="lightShanshuo-2" mode=""></image>
				<image :src="staticImgs.lightShanshuo" class="lightShanshuo-3" mode=""></image>
			</view>
			<!-- :scroll-into-view="scrollViewId" -->
			<!-- :scroll-top="scrollTopY" -->
			<!-- :scroll-with-animation="true" -->
			<!-- :scroll-into-view="scrollViewId" -->
			<scroll-view :scroll-y="true" :class="['question-scrollview']" :scroll-into-view="scrollViewId"
				:scroll-with-animation="true">
				<view>
					<view v-for="(item,index) in questionList" :key="index" class="item-box" :id="'scrollViewId'+index">
						<view class="question-box" v-if="index<flagNumQstn">
							<!-- <view :style="{height: index==7?'438rpx':'538rpx'}"></view> -->
							<view style="height: 160rpx;"></view>
							<view v-if="index==0&&index<flagNumQstn">
								<image class="num-img" :src="getForEachImg(index,'num')" mode="widthFix"></image>
								<image class="title-img" :src="getForEachImg(index,'title')" mode="widthFix"></image>
								<view class="bottom-box"
									:style="{backgroundImage:'url('+getForEachImg(index,'qstn-bg')+')'}">
									<view style="height: 230rpx;"></view>
									<view class="light-bg" :style="{backgroundImage:'url('+staticImgs.lightBg+')'}">
										<Hj3DisplayImages ref='hj3d' :images="item.optnList" :vertical="false"
											:vtouch="true" @itap="hj3DisplayTap" :autoplay="false" :clockwise="true"
											:interval="2000" :titleBottom="true" :currentQstnIndex="index">
										</Hj3DisplayImages>
									</view>

									<image class="optn-confirm" :src="staticImgs.optnConfirm" mode="widthFix"
										style="margin-top: 60rpx;" @click="nextQuestion(0)" v-if="!isOneConfirm">
									</image>
								</view>
							</view>


							<view v-else-if="index==1&&index<flagNumQstn">
								<image class="num-img" :src="getForEachImg(index,'num')" mode="widthFix"></image>
								<image class="title-img" :src="getForEachImg(index,'title')" mode="widthFix"></image>
								<view class="bottom-box"
									:style="{backgroundImage:'url('+getForEachImg(index,'qstn-bg')+')'}">
									<view class="select-index-2">
										<view :class="['select-index-2-bg-'+indexOptn,'select-index-2-bg-select']"
											v-for="(itemOptn,indexOptn) in item.optnList"
											:style="{backgroundImage:'url('+(indexOptn==select2Index?staticImgs.selectIndex2Bg:'')+')'}"
											:key="indexOptn" @click="changeSelectIndex('select2Index',indexOptn,index)">
											<image :src="itemOptn.optnImg" mode="aspectFill"
												class="select-index-2-optn-img">
											</image>
											<view :class="['flex-vc','select-index-2-optn-'+indexOptn]">
												<view
													:class="[indexOptn==select2Index?'optn-seltct-y':'optn-seltct-n','flex-cc']">
													{{selectSerialNumber[indexOptn]}}
												</view>
												<view class="select-index-optn-font">{{itemOptn.optnContent}}</view>
											</view>
										</view>
									</view>
								</view>
							</view>


							<view v-else-if="index==2&&index<flagNumQstn">
								<image class="num-img" :src="getForEachImg(index,'num')" mode="widthFix"></image>
								<image class="title-img" :src="getForEachImg(index,'title')" mode="widthFix"></image>
								<view class="bottom-box"
									:style="{backgroundImage:'url('+getForEachImg(index,'qstn-bg')+')'}">

									<view class="select-index-3">
										<view :class="['select-index-3-bg-'+indexOptn,'select-index-3-bg-select']"
											v-for="(itemOptn,indexOptn) in item.optnList"
											:style="{backgroundImage:'url('+(indexOptn==select3Index?staticImgs.selectIndex2Bg:'')+')'}"
											:key="indexOptn" @click="changeSelectIndex('select3Index',indexOptn,index)">
											<image :src="itemOptn.optnImg" mode="aspectFill"
												class="select-index-3-optn-img">
											</image>
											<view :class="['flex-vc','select-index-3-optn-'+indexOptn]">
												<view
													:class="[indexOptn==select3Index?'optn-seltct-y':'optn-seltct-n','flex-cc']">
													{{selectSerialNumber[indexOptn]}}
												</view>
												<view class="select-index-optn-font">{{itemOptn.optnContent}}</view>
											</view>
										</view>
									</view>
								</view>
							</view>


							<view v-else-if="index==3&&index<flagNumQstn">
								<image class="num-img" :src="getForEachImg(index,'num')" mode="widthFix"></image>
								<image class="title-img" :src="getForEachImg(index,'title')" mode="widthFix"></image>
								<view class="bottom-box"
									:style="{backgroundImage:'url('+getForEachImg(index,'qstn-bg')+')'}">
									<view class="select-index-4">
										<view :class="['select-index-4-bg-'+indexOptn,'sib-bg']"
											v-for="(itemOptn,indexOptn) in item.optnList"
											:style="{backgroundImage:'url('+(indexOptn==select4Index?staticImgs.selectIndex4BgN:staticImgs.selectIndex4BgY)+')'}"
											:key="indexOptn"
											@click.stop="changeSelectIndex('select4Index',indexOptn,index)">
											<image :src="itemOptn.optnImg" mode="aspectFill"
												class="select-index-4-optn-img">
											</image>
											<view :class="['flex-vc','select-index-4-optn-'+indexOptn]">
												<view
													:class="[indexOptn==select4Index?'optn-seltct-y':'optn-seltct-n','flex-cc']">
													{{selectSerialNumber[indexOptn]}}
												</view>
												<view class="select-index-optn-font">{{itemOptn.optnContent}}</view>
											</view>
										</view>
									</view>
								</view>
							</view>

							<view v-else-if="index==4&&index<flagNumQstn">
								<image class="num-img" :src="getForEachImg(index,'num')" mode="widthFix"></image>
								<image class="title-img" :src="getForEachImg(index,'title')" mode="widthFix"></image>
								<view class="bottom-box"
									:style="{backgroundImage:'url('+getForEachImg(index,'qstn-bg')+')'}">
									<view class="select-index-5">
										<view :class="['select-index-5-bg-'+indexOptn,'select-index-5-bg-select']"
											v-for="(itemOptn,indexOptn) in item.optnList"
											:style="{backgroundImage:'url('+(indexOptn==select5Index?staticImgs.selectIndex2Bg:'')+')'}"
											:key="indexOptn" @click="changeSelectIndex('select5Index',indexOptn,index)">
											<image :src="itemOptn.optnImg" mode="aspectFill"
												class="select-index-5-optn-img">
											</image>
											<view :class="['flex-vc','select-index-5-optn-'+indexOptn]">
												<view
													:class="[indexOptn==select5Index?'optn-seltct-y':'optn-seltct-n','flex-cc']">
													{{selectSerialNumber[indexOptn]}}
												</view>
												<view class="select-index-optn-font">{{itemOptn.optnContent}}</view>
											</view>
										</view>
									</view>
								</view>
							</view>


							<view v-else-if="index==5&&index<flagNumQstn">
								<image class="num-img" :src="getForEachImg(index,'num')" mode="widthFix"></image>
								<image class="title-img" :src="getForEachImg(index,'title')" mode="widthFix"></image>
								<view class="bottom-box"
									:style="{backgroundImage:'url('+getForEachImg(index,'qstn-bg')+')'}">
									<view class="select-index-6">
										<view :class="['select-index-6-bg-'+indexOptn,'select-index-6-bg-select']"
											v-for="(itemOptn,indexOptn) in item.optnList"
											:style="{backgroundImage:'url('+(indexOptn==select6Index?staticImgs.selectIndex6Bg:'')+')'}"
											:key="indexOptn" @click="changeSelectIndex('select6Index',indexOptn,index)">
											<image :src="itemOptn.optnImg" mode="aspectFill"
												class="select-index-6-optn-img">
											</image>
											<view :class="['flex-vc','select-index-6-optn-'+indexOptn]">
												<view
													:class="[indexOptn==select6Index?'optn-seltct-y':'optn-seltct-n','flex-cc']">
													{{selectSerialNumber[indexOptn]}}
												</view>
												<view class="select-index-optn-font">{{itemOptn.optnContent}}</view>
											</view>
										</view>
									</view>
								</view>
							</view>


							<view v-else-if="index==6&&index<flagNumQstn">
								<image class="num-img" :src="getForEachImg(index,'num')" mode="widthFix"></image>
								<image class="title-img" :src="getForEachImg(index,'title')" mode="widthFix"></image>
								<view class="bottom-box"
									:style="{backgroundImage:'url('+getForEachImg(index,'qstn-bg')+')'}"
									style="padding-top: 80rpx;">
									<!-- previous-margin="130rpx" next-margin="130rpx" -->

									<swiper class="select-index-7-swiper" :circular="true" :display-multiple-items="1"
										@change="selectIndex7Change" :current="currentSwiper7Index">
										<swiper-item v-for="(itemOptn,indexOptn) in item.optnList" :key="indexOptn"
											:class="['swiper-item-7']">
											<view style="margin-top: 50rpx;" :class="['swiper-item-7']">
												<image :src="itemOptn.optnImg" mode="aspectFill"
													:class="[currentSwiper7Index==indexOptn?'animation-fangda':'animation-suoxiao','select-index-7-optn-img']">
												</image>
												<view :class="['flex-cc','select-index-7-optn']">
													<view
														:class="[indexOptn==currentSwiper7Index?'optn-seltct-y':'optn-seltct-n','flex-cc']">
														{{selectSerialNumber[indexOptn]}}
													</view>
													<view class="select-index-optn-font">{{itemOptn.optnContent}}</view>
												</view>
											</view>
										</swiper-item>
									</swiper>
									<image class="optn-confirm" :src="staticImgs.optnConfirm" mode="widthFix"
										style="margin-top: 50rpx;" @click="nextQuestion(6)"
										:style="{visibility:!isSevenConfirm?'visible':'hidden'}"></image>
									<!-- position: absolute;right: 30rpx;top: 70rpx; -->
									<view
										style="letter-spacing: 4rpx;font-size: 24rpx;color: #FFFFFF;width: 100%;text-align: center;margin-top: 20rpx;">
										左右滑动选择您的答案</view>
								</view>
							</view>



							<view v-else-if="index==7&&index<flagNumQstn">
								<image class="num-img" :src="getForEachImg(index,'num')" mode="widthFix"></image>
								<image class="title-img" :src="getForEachImg(index,'title')" mode="widthFix"></image>
								<view class="bottom-box"
									:style="{backgroundImage:'url('+getForEachImg(index,'qstn-bg')+')'}">
									<view class="select-index-8">
										<image :src="staticImgs.selectIndex8Bg" mode=""
											class="select-index-8-select-bg">
										</image>
										<!-- previous-margin="200rpx" next-margin="200rpx" -->
										<swiper :vertical="true" class="select-index-8-swiper" :circular="true"
											:display-multiple-items="3" @change="selectIndex8Change"
											:current="currentSwiperIndex">
											<swiper-item v-for="(itemOptn,indexOptn) in item.optnList" :key="indexOptn"
												class="swiper-item">
												<view :class="['select-index-8-bg-optn']">
													<view class="flex-vc">
														<image :src="itemOptn.optnImg" mode=""
															:class="[(currentSwiperIndex==3?0:currentSwiperIndex+1)==indexOptn?'animation-fangda':'animation-suoxiao','select-index-8-optn-img']">
														</image>
														<view :class="['flex-vc','select-index-8-optn-'+indexOptn]">
															<view
																:class="[(currentSwiperIndex==3?0:currentSwiperIndex+1)==indexOptn?'optn-seltct-y':'optn-seltct-n','flex-cc']">
																{{selectSerialNumber[indexOptn]}}
															</view>
															<view class="select-index-optn-font">
																{{itemOptn.optnContent}}
															</view>
														</view>
													</view>
												</view>

											</swiper-item>
										</swiper>
										<image class="optn-confirm" :src="staticImgs.optnConfirm" mode="widthFix"
											style="margin-top: -150rpx;" @click="nextQuestion(7)"
											:style="{visibility:!isEightConfirm?'visible':'hidden'}">
										</image>
									</view>
								</view>
							</view>


							<view v-else-if="index==8&&index<flagNumQstn">
								<view style="height: 300rpx;"></view>
								<view class="bottom-box">
									<image class="end-title" :src="staticImgs.endTitle" mode="widthFix"></image>
									<view class="end-input flex-cc"
										:style="{backgroundImage:'url('+staticImgs.endNickName+')'}">
										<input v-model="inputNickName" type="text" placeholder="请输入您的昵称"
											placeholder-style="color:#B9B6B6;" maxlength="12" class="flex-cc"
											style="width: 600rpx;height: 143rpx;text-align: center;" />
									</view>
									<image class="end-btn" :src="staticImgs.endBtn" mode="widthFix"
										@click="submitAnswer()">
									</image>
								</view>
							</view>



						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		userWebAnswer,
		get_scl_info,
		checkUserIsPayScl
	} from '@/common/api/scl_api.js'
	import {
		updateUserInfo
	} from '@/common/api/user_api.js'
	import {
		mapGetters
	} from 'vuex'

	import Hj3DisplayImages from '@/subcontractorD/components/hj3-display-images/hj3-display-images.vue'
	import sclIntroPageTypeDongWuLianAi from '@/subcontractorD/pages/sclDoQuestion/scl-intro-page-type-dongwulianai.vue'
	var app = getApp();
	export default {
		components: {
			Hj3DisplayImages,
			sclIntroPageTypeDongWuLianAi
		},
		props: {
			paramObj: Object,
			questionList: Array,
			questionListItem: Object,
			percent: {
				type: Number,
				default: 0
			},
			max: {
				type: Number,
				default: 0
			},
			current: {
				type: Number,
				default: 0
			},
			countTime: {
				type: String,
				default: ''
			},
			optnList: {
				type: Array,
				default: () => []
			},
			question: {
				type: String,
				default: ''
			},
			mbtiType: {
				type: String,
				default: 'job-mbti'
			}
		},
		computed: {
			...mapGetters('user', ['nickName', 'uGender', 'avatar'])
		},
		data() {
			return {
				inputNickName: '',
				navigationBarDataInfo: {
					"bg_color": "rgba(0,0,0,0)",
					"color": "#fff",
					"flag": 4,
					"name": "",
					"hasEntity": false,
				},
				startTime: new Date().getTime(),
				select2Index: -1,
				select3Index: -1,
				select4Index: -1,
				select5Index: -1,
				select6Index: -1,
				select7Index: -1,
				scrollViewId: '',
				currentSwiperIndex: 0,
				currentSwiper7Index: 0,
				value: 1,
				staticImgs: {
					bg: this.imgBaseURL + '/scl/dongwulianai/question/qstn-bg.png',
					topBg: this.imgBaseURL + '/scl/dongwulianai/question/top-bg.png?' + Math.random(),
					lightBg: this.imgBaseURL + '/scl/dongwulianai/question/question1/light-bg.png',
					selectIndex2Bg: this.imgBaseURL + '/scl/dongwulianai/question/question2/select-bg.png',
					selectIndex4BgY: this.imgBaseURL + '/scl/dongwulianai/question/question4/select-bg-4-y.png',
					selectIndex4BgN: this.imgBaseURL + '/scl/dongwulianai/question/question4/select-bg-4-n.png',
					selectIndex6Bg: this.imgBaseURL + '/scl/dongwulianai/question/question6/select-bg.png',
					selectIndex8Bg: this.imgBaseURL + '/scl/dongwulianai/question/question8/select-bg.png',
					endBtnResult: this.imgBaseURL + '/scl/dongwulianai/question/end-btn-result.png',
					endTitle: this.imgBaseURL + '/scl/dongwulianai/question/end-title.png',
					endBtn: this.imgBaseURL + '/scl/dongwulianai/question/end-btn.png',
					endNickName: this.imgBaseURL + '/scl/dongwulianai/question/end-nick-name.png',
					optnConfirm: this.imgBaseURL + '/scl/dongwulianai/question/optn-confirm.png',
					lightShanshuo: this.imgBaseURL + '/scl/dongwulianai/question/light-shanshuo.png'
				},
				selectSerialNumber: ['A', 'B', 'C', 'D'],
				topH: 0,
				// percentNum:40,
				legendNum: 0,
				reRenderLegend: false,
				selectIndex: -1,
				countTimeStr: '',
				startDateTime: 0,
				hasOverMaxOptCon: false,
				firstTap: false,
				moreAnswer: [],
				moreAnswerRes: '',
				lastSelectIndex: null,
				gender: null,
				reRenderSlider: false,
				questionListSub: [],
				currentIndex: 0,
				isSclNotFreeAndNotOwned: true,
				freeUse: false,
				scrollTopY: 0,
				flagNumQstn: 1,
				isOneConfirm: false,
				isSevenConfirm: false,
				isEightConfirm: false,
				isStartScl: false,
				detailData: null
			}
		},
		mounted() {
			get_scl_info(this.paramObj).then(res => {
				this.detailData = res.data.data;
			})
			this.questionListSub = this.questionList;
			this.questionListSub.push({
				optnList: [{}]
			})

			//初始化几个默认题目的选择
			this.currentIndex = 0
			this.updateSelectSclQuestion(0, 'noNext');

			// this.currentIndex = 1
			// this.updateSelectSclQuestion(0, 'noNext');

			// this.currentIndex = 2
			// this.updateSelectSclQuestion(0, 'noNext');

			// this.currentIndex = 3
			// this.updateSelectSclQuestion(0, 'noNext');

			// this.currentIndex = 4
			// this.updateSelectSclQuestion(0, 'noNext');

			// this.currentIndex = 5
			// this.updateSelectSclQuestion(0, 'noNext');

			this.currentIndex = 6
			this.updateSelectSclQuestion(0, 'noNext');

			this.currentIndex = 7
			this.updateSelectSclQuestion(1, 'noNext');
		},
		methods: {
			startScl() {
				this.isStartScl = true;
			},
			smoothScrollToTarget(targetId) {
				const query = uni.createSelectorQuery().in(this);
				query.select('#' + targetId).boundingClientRect();
				query.select('#scrollView').boundingClientRect();
				query.exec((res) => {
					console.log(res, '------------')
					const targetElementRect = res[0];
					const scrollViewRect = res[1];
					const targetScrollTop = targetElementRect.top - scrollViewRect.top;
					this.smoothScrollToPosition(targetScrollTop, scrollViewRect.top);
				});
			},
			smoothScrollToPosition(targetScrollTop, startScrollTop) {
				// const scrollView = this.selectComponent('#scrollView');
				// const startScrollTop = scrollView.scrollTop;
				const duration = 500; // 滚动持续时间，单位：毫秒
				const startTime = Date.now();
				const animateScroll = () => {
					const currentTime = Date.now();
					const elapsedTime = currentTime - startTime;
					const progress = Math.min(elapsedTime / duration, 1);
					const easeInOutCubic = t => t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;
					const easedProgress = easeInOutCubic(progress);
					const newScrollTop = startScrollTop + (targetScrollTop - startScrollTop) * easedProgress;
					this.scrollTopY = newScrollTop;
					if (progress < 1) {
						this.animationFrameId = setTimeout(animateScroll, 16); // 大约60fps
					} else {
						clearTimeout(this.animationFrameId);
					}
				};
				animateScroll();
			},
			processAnswer() {
				let tmpArr = []
				this.questionListSub.forEach((itemI, i) => {
					if (itemI && itemI.subjectivity && itemI.ansOk) {
						tmpArr.push({
							qstnNo: itemI.qstnNo,
							sclId: this.sclId,
							optnId: itemI.id,
							userId: this.userId,
							subjectivityContent: itemI.ansData,
							"changeTimes": 0,
							"ansDate": itemI.ansData
						})
					} else {
						this.questionListSub[i].optnList.forEach((itemJ, j) => {
							if (itemJ && itemJ.select && itemJ.select == '1') {
								let data = this.questionListSub[i];
								tmpArr.push({
									qstnNo: itemI.qstnNo,
									optnNo: data.optnList[j].optnNo,
									"optnNum": data.optnList.length,
									"sclId": data.sclId,
									"qstnId": data.optnList[j].qstnId,
									"optnId": data.optnList[j].id,
									"score": data.optnList[j].optnScore,
									"outType": data.optnList[j].outType,
									"outId": data.optnList[j].outId,
									"changeTimes": 0,
									"ansDate": null,
								});
							}
						})
					}

				})
				return tmpArr
			},
			async submitAnswer() {
				let answerJson = [];
				answerJson = this.processAnswer();
				console.log(answerJson, '-----');
				if (answerJson.length != this.questionListSub.length - 1) {
					this.$showToast('请完成所有题目');
					return
				}
				console.log(this.inputNickName, '=====请输入您的昵称');

				if (!this.inputNickName) {
					this.$showToast('请输入您的昵称');
					return
				}
				if (this.$fangBaoClick()) return
				let userInfo = this.$store.getters['user/getUserInfo'];
				userInfo.nickName = this.inputNickName;
				userInfo.avatar = this.avatar;
				userInfo.sex = this.uGender;
				this.$store.commit('user/setUserInfo', userInfo)
				updateUserInfo({
					nickName: this.inputNickName,
					avatarUrl: this.avatar,
					gender: this.uGender
				}).then(res => {

				})

				const submitForm = {
					inputNickName: this.inputNickName,
					type: 'order',
					sclId: this.paramObj.sclId,
					testDuration: new Date().getTime() - this.startTime,
					h5Type: this.paramObj.userType,
					answerJson: JSON.stringify(answerJson)
				}
				let res = await get_scl_info(this.paramObj)
				let detail = res.data.data;
				if (detail.extBuyUse == '1' && detail.newOriginalPrice > 0) {
					if (detail.discountNum == 10) {
						this.freeUse = true
					}
				}
				this.isSclNotFreeAndNotOwned = detail.newOriginalPrice > 0 && detail.extBuyUse == '1'

				if (this.isSclNotFreeAndNotOwned && !this.freeUse) {
					uni.navigateTo({
						url: '/subcontractorC/pages/dongwulianai/payPage?submitForm=' + JSON.stringify(
							submitForm)
					})
				} else {
					this.toSubmit(submitForm);
				}
			},
			toSubmit(submitForm) {
				this.$u.api.userWebAnswer(submitForm).then(res => {
					if (res.data.code == 2000) {
						let url = ''
						url = '/subcontractorB/pages/sclResult/sclResult?id=' + res.data.data.id
						// debugger
						const tmpObj = res.data.usergetDiscount || {}
						if (tmpObj.code) {
							uni.setStorageSync('newCouponInfo', {
								couponId: tmpObj.id,
								couponCode: tmpObj.code,
								couponName: tmpObj.discountName,
								couponNum: tmpObj.discount
							})
						}
						uni.reLaunch({
							url
						})
					} else {
						setTimeout(() => {
							this.$showToast(res.data.message);
						}, 300)
					}
				})
			},
			changeSelectIndex(name, indexOptn, currentQstnIndex) {
				this[name] = indexOptn;
				console.log(name, indexOptn, currentQstnIndex, this[name], '---------选择位置')
				this.currentIndex = currentQstnIndex
				this.updateSelectSclQuestion(indexOptn)
			},
			updateSelectSclQuestion(indexSelect, noNext) {
				this.questionListSub[this.currentIndex].optnList.forEach((item, index) => {
					if (indexSelect == index) {
						item.select = '1'
					} else {
						item.select = '0'
					}
				})
				this.$set(this.questionListSub, this.currentIndex, this.questionListSub[this.currentIndex]);
				if (!noNext) {
					if (this.currentIndex === 0 || this.currentIndex === 6 || this.currentIndex === 7) return
					this.nextQuestion();
				}
			},
			nextQuestion(initCurrentIndex) {
				if (initCurrentIndex != undefined) {
					if (initCurrentIndex === 0) {
						this.isOneConfirm = true
					}
					if (initCurrentIndex === 6) {
						this.isSevenConfirm = true
					}
					if (initCurrentIndex === 7) {
						this.isEightConfirm = true
					}
					this.currentIndex = initCurrentIndex;
				}
				if (this.currentIndex < this.questionListSub.length - 1) {
					this.currentIndex++;
					if (this.flagNumQstn <= this.currentIndex) {
						this.flagNumQstn++;
					}
					// this.scrollTopY = this.currentIndex*200+200
					this.scrollViewId = "scrollViewIdnone";
					setTimeout(() => {
						this.scrollViewId = "scrollViewId" + this.currentIndex;
						// this.smoothScrollToTarget(this.scrollViewId)
					}, 300)
					return
				}
			},
			selectIndex7Change(e) {
				this.currentSwiper7Index = e.detail.current;
				let currentQstnIndex = 6;
				this.currentIndex = currentQstnIndex;
				this.updateSelectSclQuestion(this.currentSwiper7Index)
			},
			selectIndex8Change(e) {
				this.currentSwiperIndex = e.detail.current;
				let currentQstnIndex = 7;
				this.currentIndex = currentQstnIndex;
				let selectIndex = this.currentSwiperIndex == 3 ? 0 : this.currentSwiperIndex
				this.updateSelectSclQuestion(selectIndex)
			},
			getForEachImg(index, name) {
				if (index == 7 && name == 'qstn-bg') {
					return this.imgBaseURL + `/scl/dongwulianai/question/question${index+1}/${name}-${index+1}-new.png`
				} else {
					return this.imgBaseURL + `/scl/dongwulianai/question/question${index+1}/${name}-${index+1}.png`
				}
			},
			hj3DisplayTap(tap, indexOptn, currentQstnIndex) {
				console.log(tap, indexOptn, currentQstnIndex)
				this.currentIndex = currentQstnIndex
				this.updateSelectSclQuestion(indexOptn)
			}
		}
	}
</script>

<style scoped lang="scss">
	
	/* 定义淡入动画 */   
	@keyframes fade-in {
	    from {
	        opacity: 0;
	    }
	    to {
	        opacity: 1;
	    }   
	}
	   
	/* 使用淡入动画 */   
	.fade-in-element {
	    animation: fade-in 1s ease-in-out forwards;   
	}
	
	/* 定义淡出动画 */
	@keyframes fade-out {
		from {
			opacity: 1;
		}
	
		to {
			opacity: 0;
		}
	}
	
	/* 使用淡出动画 */
	.fade-out-element {
		animation: fade-out 1s ease-in-out forwards;
	}
	
	
	.top-box {
		width: 100%;
		height: 538rpx;
		background-size: 100% 100%;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 999;
		pointer-events: none;
		// background-color: #5DFFF0;
		// background: rgba(0, 0, 0, 0.6);
		// box-shadow: 0 0 10px rgba(0, 0, 0, 0.3)
		// backdrop-filter: blur(10px);
		// -webkit-backdrop-filter: blur(10px);
	}

	.lightShanshuo-1 {
		width: 94rpx;
		height: 94rpx;
		position: absolute;
		left: 85rpx;
		top: 318rpx;
		animation: shanshuo .3s ease-in-out infinite;
	}

	.lightShanshuo-2 {
		width: 62rpx;
		height: 62rpx;
		position: absolute;
		left: 479rpx;
		top: 197rpx;
		animation: shanshuo .1s ease-in-out infinite;
	}

	.lightShanshuo-3 {
		width: 108rpx;
		height: 108rpx;
		position: absolute;
		left: 552rpx;
		top: 261rpx;
		animation: shanshuo .2s ease-in-out infinite;
	}

	@keyframes shanshuo {
		from {
			transform: scale(1);
			opacity: 1;
		}

		50% {
			transform: scale(0.80);
			opacity: 0.6;
		}

		to {
			transform: scale(1);
			opacity: 1;
		}
	}

	.quesiton-page {
		width: 100vw;
		height: 100vh;
		background-size: 100% 100%;
		box-sizing: border-box;
		background-attachment: fixed;
		padding-top: 188rpx;
		box-sizing: border-box;
	}

	.question-scrollview {
		width: 100vw;
		height: calc(100vh - 188rpx);
		position: relative;
		z-index: 99;
	}


	.question-box {
		width: 100%;
		height: 1500rpx;
		background-size: cover;
		position: relative;
		// padding-top: 80rpx;
		box-sizing: border-box;
	}

	.item-box {}

	.bottom-box {
		width: 750rpx;
		height: 1077rpx;
		background-size: 100% 100%;
		position: relative;
		z-index: 10;
	}

	.num-img {
		width: 77rpx;
		// height: 57rpx;
		display: block;
		margin: 0 auto;
		margin-top: -4rpx;
	}

	.title-img {
		width: 750rpx;
		// height: 144rpx;
		display: block;
		margin: 0 auto;
	}

	.light-bg {
		width: 598rpx;
		height: 586rpx;
		background-size: 100% 100%;
		margin: 0 auto;
	}




	// 2,3,5公共css

	.optn-seltct-y {
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
		background: #5DFFF0;
		font-weight: bold;
		font-size: 24rpx;
		color: #064C46;
	}

	.optn-seltct-n {
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
		background: #C16EAE;
		font-weight: bold;
		font-size: 24rpx;
		color: #040404;
	}

	.select-index-optn-font {
		font-size: 42rpx;
		color: #FFFFFF;
		margin-left: 12rpx;
	}

	.sib-bg {
		width: 380rpx;
		height: 550rpx;
		background-size: 100% 100%;
	}




	.select-index-2 {
		position: relative;

		.select-index-2-bg-0 {
			position: absolute;
			left: 15rpx;
			top: -20rpx;
		}

		.select-index-2-bg-1 {
			position: absolute;
			right: 15rpx;
			top: -20rpx;
		}

		.select-index-2-bg-2 {
			position: absolute;
			left: 15rpx;
			top: 380rpx;
		}

		.select-index-2-bg-3 {
			position: absolute;
			right: 15rpx;
			top: 380rpx;
		}

		.select-index-2-optn-img {
			width: 400rpx;
			height: 400rpx;
			display: block;
			margin-top: 60rpx;
		}

		.select-index-2-bg-select {
			width: 380rpx;
			height: 550rpx;
			background-size: 100% 100%;
		}

		.select-index-2-optn-0 {
			position: absolute;
			right: 30rpx;
			bottom: 140rpx;
		}

		.select-index-2-optn-1 {
			position: absolute;
			left: 30rpx;
			top: 150rpx;
		}

		.select-index-2-optn-2 {
			position: absolute;
			left: 0rpx;
			top: 190rpx;
		}

		.select-index-2-optn-3 {
			position: absolute;
			left: 20rpx;
			top: 120rpx;
		}

	}




	.select-index-3 {
		position: relative;

		.select-index-3-bg-0 {
			position: absolute;
			left: 0rpx;
			top: -120rpx;
		}

		.select-index-3-bg-1 {
			position: absolute;
			right: 15rpx;
			top: 10rpx;
		}

		.select-index-3-bg-2 {
			position: absolute;
			left: 15rpx;
			top: 360rpx;
		}

		.select-index-3-bg-3 {
			position: absolute;
			right: 60rpx;
			top: 480rpx;
		}

		.select-index-3-optn-img {
			width: 400rpx;
			height: 400rpx;
			display: block;
			margin-top: 60rpx;
		}

		.select-index-3-bg-select {
			width: 380rpx;
			height: 550rpx;
			background-size: 100% 100%;
		}

		.select-index-3-optn-0 {
			position: absolute;
			right: 120rpx;
			bottom: 110rpx;
		}

		.select-index-3-optn-1 {
			position: absolute;
			left: 30rpx;
			top: 240rpx;
		}

		.select-index-3-optn-2 {
			position: absolute;
			left: 135rpx;
			top: 430rpx;
		}

		.select-index-3-optn-3 {
			position: absolute;
			left: 270rpx;
			top: 90rpx;
		}

	}


	.select-index-4 {
		position: relative;

		.select-index-4-bg-0 {
			position: absolute;
			left: 65rpx;
			top: 0rpx;

		}

		.select-index-4-bg-1 {
			position: absolute;
			right: 65rpx;
			top: 30rpx;
		}

		.select-index-4-bg-2 {
			position: absolute;
			left: 65rpx;
			top: 500rpx;
		}

		.select-index-4-bg-3 {
			position: absolute;
			right: 65rpx;
			top: 530rpx;
		}

		.select-index-4-optn-img {
			width: 320rpx;
			height: 450rpx;
			display: block;
			margin-left: -40rpx;
			margin-top: -35rpx;
			pointer-events: none;
		}

		.sib-bg {
			width: 231rpx;
			height: 357rpx;
			background-size: 100% 100%;
		}

		.select-index-4-optn-0 {
			position: absolute;
			left: -20rpx;
			top: 90rpx;
		}

		.select-index-4-optn-1 {
			position: absolute;
			left: -70rpx;
			top: 120rpx;
		}

		.select-index-4-optn-2 {
			position: absolute;
			right: -90rpx;
			top: 140rpx;
		}

		.select-index-4-optn-3 {
			position: absolute;
			left: 50rpx;
			top: 30rpx;
		}

	}

	.select-index-5 {
		position: relative;

		.select-index-5-bg-0 {
			position: absolute;
			left: 15rpx;
			top: 60rpx;

		}

		.select-index-5-bg-1 {
			position: absolute;
			right: 15rpx;
			top: -30rpx;
		}

		.select-index-5-bg-2 {
			position: absolute;
			left: 15rpx;
			top: 540rpx;
		}

		.select-index-5-bg-3 {
			position: absolute;
			right: 15rpx;
			top: 440rpx;
		}

		.select-index-5-optn-img {
			width: 400rpx;
			height: 440rpx;
			display: block;
			margin-top: 60rpx;
		}

		.select-index-5-bg-select {
			width: 380rpx;
			height: 550rpx;
			background-size: 100% 100%;
		}

		.select-index-5-optn-0 {
			position: absolute;
			left: 60rpx;
			top: 60rpx;
		}

		.select-index-5-optn-1 {
			position: absolute;
			right: 90rpx;
			top: 80rpx;
		}

		.select-index-5-optn-2 {
			position: absolute;
			left: 30rpx;
			top: 230rpx;
		}

		.select-index-5-optn-3 {
			position: absolute;
			left: 140rpx;
			bottom: 40rpx;
		}

	}

	.select-index-6 {
		position: relative;

		.select-index-6-bg-0 {
			position: absolute;
			left: 15rpx;
			top: 30rpx;

		}

		.select-index-6-bg-1 {
			position: absolute;
			right: 20rpx;
			top: 80rpx;
		}

		.select-index-6-bg-2 {
			position: absolute;
			left: 60rpx;
			top: 500rpx;
		}

		.select-index-6-bg-3 {
			position: absolute;
			right: 15rpx;
			top: 540rpx;
		}

		.select-index-6-optn-img {
			width: 360rpx;
			height: 360rpx;
			display: block;
			margin-top: -10rpx;
			animation: shandong 3s infinite ease-out;
		}


		.select-index-6-bg-select {
			width: 348rpx;
			height: 333rpx;
			background-size: 100% 100%;
		}

		.select-index-6-optn-0 {
			position: absolute;
			left: 121rpx;
			bottom: -70rpx;
		}

		.select-index-6-optn-1 {
			position: absolute;
			right: 130rpx;
			bottom: -80rpx;
		}

		.select-index-6-optn-2 {
			position: absolute;
			left: 110rpx;
			bottom: -80rpx;
		}

		.select-index-6-optn-3 {
			position: absolute;
			left: 140rpx;
			bottom: -60rpx;
		}

	}


	@keyframes shandong {
		from {
			transform: scale(1);
		}

		50% {
			transform: scale(0.80);
		}

		to {
			transform: scale(1);
		}
	}

	.select-index-7 {
		position: relative;
		margin-top: -1150rpx;
		z-index: 10;
	}

	.select-index-7-swiper {
		width: 750rpx;
		height: 700rpx;

		.swiper-item-7 {
			width: 100%;
		}

		.select-index-7-optn-img {
			width: 400rpx;
			height: 350rpx;
			display: block;
			margin: 0 auto;
			margin-top: 130rpx;
		}

		.select-index-7-optn {
			margin-top: 150rpx;
		}

		.animation-fangda {
			animation: animationfangda7 0.3s ease-in-out forwards;
		}

		.animation-suoxiao {
			animation: animationsuoxiao7 0.3s ease-in-out forwards;
		}
	}

	@keyframes animationfangda7 {
		from {
			transform: scale(1.8);
		}

		to {
			transform: scale(2.0);
		}
	}

	@keyframes animationsuoxiao7 {
		from {
			transform: scale(2.0);
		}

		to {
			transform: scale(1.8);
		}
	}


	.select-index-8 {
		position: relative;

		.select-index-8-swiper {
			width: 460rpx;
			height: 1077rpx;
			margin: 0 auto;
		}

		.select-index-8-bg-optn {
			width: 480rpx;
			// height: 629rpx;
			margin: 0 auto;
		}

		.select-index-8-select-bg {
			width: 629rpx;
			height: 153rpx;
			position: absolute;
			left: 50%;
			top: 44%;
			transform: translateX(-50%);
		}

		.swiper-item {
			height: 33.33%;
			/* 每个swiper-item占总高度的三分之一 */
		}

		.select-index-8-optn-img {
			width: 300rpx;
			height: 300rpx;
			display: block;
		}

		.animation-fangda {
			animation: animationfangda 0.3s ease-in-out forwards;
		}

		.animation-suoxiao {
			animation: animationsuoxiao 0.3s ease-in-out forwards;
		}

	}

	@keyframes animationfangda {
		from {
			transform: scale(1);
		}

		to {
			transform: scale(1.3);
		}
	}

	@keyframes animationsuoxiao {
		from {
			transform: scale(1.3);
		}

		to {
			transform: scale(1);
		}
	}




	.btn-submit {
		width: 400rpx;
		height: 159rpx;
		display: block;
		margin: 0 auto;
		margin-top: -10rpx;
	}

	.end-title {
		width: 750rpx;
	}

	.end-input {
		width: 600rpx;
		height: 143rpx;
		font-weight: bold;
		font-size: 40rpx;
		color: #333;
		background-size: 100% 100%;
		margin: 0 auto;
	}

	.end-btn {
		width: 292rpx;
		height: 292rpx;
		display: block;
		margin: 0 auto;
		margin-top: 100rpx;
	}

	.optn-confirm {
		width: 211rpx;
		height: 56rpx;
		display: block;
		margin: 0 auto;
		animation: shandong 1s infinite ease-out;
	}
</style>